/**
 * Created by maiseries on 2018/1/4.
 */
import React from 'react';
import {
    StyleSheet,
    View,
    Text,
} from 'react-native';

import DefaultFieldType from './DefaultFieldType'

let self = null;

export default class DefaultField extends React.Component {

    static propTypes = {
        style: React.PropTypes.number,
        textStyle: React.PropTypes.number,
        text: React.PropTypes.string.isRequired,
        subText: React.PropTypes.string,
        type: React.PropTypes.string,
        last: React.PropTypes.bool,
    }

    static defaultProps = {
        last: false,
        type: DefaultFieldType.INLINE
    }

    constructor(prop) {
        super(prop)
    }

    render() {
        return (
            <View
                style={[
                    this.props.type === DefaultFieldType.INLINE ? base.rowCC : {},
                    this.props.last ? {} : styles.line,
                    styles.container,
                    this.props.type === DefaultFieldType.INLINE ? styles.inline : styles.block,
                    this.props.style]}>
                <Text allowFontScaling={false} style={[
                    styles.field,
                    this.props.textStyle,
                    this.props.type === DefaultFieldType.INLINE ? styles.inlineField : styles.blockField,
                ]}>{this.props.text}{
                    this.props.subText? <Text allowFontScaling={false} style={styles.subText}>{this.props.subText}</Text> : <Text/>
                }</Text>
                <View style={styles.childrenBox}>{this.props.children}</View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        alignSelf: 'stretch',
        paddingHorizontal: layout.GAP_HORIZONTAL_LARGE,
    },
    inline: {
    },
    block: {
        paddingBottom: layout.height(30),
    },
    line: {
        borderBottomWidth: layout.LINE_WIDTH * 2,
        borderBottomColor: layout.MAIN_BORDER_COLOR
    },
    field: {
        fontSize: layout.font(32),
        color: layout.MAIN_FONT_COLOR,
    },
    inlineField: {
        paddingRight: layout.GAP_HORIZONTAL_LARGE,
        paddingVertical: layout.height(30)
    },
    blockField: {
        paddingTop: layout.height(30),
        paddingBottom: layout.height(16),
    },
    subText: {
        fontSize: layout.font(28),
        color: layout.FORM_AUX_FONT_COLOR
    },
    childrenBox: {
        flex: 1,
        alignSelf: 'stretch',
    }
});